import { useState } from 'preact/hooks'

export default function RecommendationPanel({ recommendations, isProcessing }) {
  const [isExpanded, setIsExpanded] = useState(true)

  return (
    <div
      class={`absolute right-0 top-24 z-10 transition-all duration-300 ${
        isExpanded ? 'w-96' : 'w-12'
      }`}
    >
      {/* 展开/收起按钮 */}
      <button
        onClick={() => setIsExpanded(!isExpanded)}
        class="absolute left-0 top-0 w-12 h-12 bg-dark/90 backdrop-blur-sm border border-secondary/30 rounded-l-lg flex items-center justify-center hover:bg-secondary/20 transition-colors"
      >
        <span class="text-secondary text-xl">{isExpanded ? '→' : '←'}</span>
      </button>

      {isExpanded && (
        <div class="bg-dark/90 backdrop-blur-sm border-l border-secondary/30 p-6 h-[calc(100vh-6rem)] overflow-y-auto fade-in">
          <h2 class="text-xl font-bold mb-4 text-secondary">推荐结果</h2>

          {isProcessing && recommendations.length === 0 && (
            <div class="flex flex-col items-center justify-center py-12">
              <div class="w-12 h-12 border-4 border-secondary border-t-transparent rounded-full animate-spin mb-4" />
              <p class="text-gray-400 text-sm">正在生成推荐...</p>
            </div>
          )}

          {!isProcessing && recommendations.length === 0 && (
            <div class="flex flex-col items-center justify-center py-12 text-gray-400">
              <svg
                class="w-16 h-16 mb-4 opacity-50"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
                />
              </svg>
              <p class="text-sm text-center">
                发布帖子后，
                <br />
                推荐结果将显示在这里
              </p>
            </div>
          )}

          {recommendations.length > 0 && (
            <div class="space-y-4">
              {recommendations.map((rec, index) => (
                <RecommendationCard key={index} recommendation={rec} index={index} />
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  )
}

function RecommendationCard({ recommendation, index }) {
  const [isExpanded, setIsExpanded] = useState(false)

  const getTypeLabel = (type) => {
    const labels = {
      expert: '专家推荐',
      topic: '相关话题',
      counter: '反向推荐',
    }
    return labels[type] || '推荐'
  }

  const getTypeBadgeColor = (type) => {
    const colors = {
      expert: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
      topic: 'bg-green-500/20 text-green-400 border-green-500/30',
      counter: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
    }
    return colors[type] || 'bg-gray-500/20 text-gray-400 border-gray-500/30'
  }

  return (
    <div
      class="bg-darker/80 border border-secondary/30 rounded-lg p-4 hover:border-secondary/50 transition-all fade-in"
      style={{ animationDelay: `${index * 100}ms` }}
    >
      {/* 头部 */}
      <div class="flex items-start justify-between mb-2">
        <div class="flex-1">
          <div class="flex items-center gap-2 mb-2">
            <span
              class={`text-xs px-2 py-1 rounded border ${getTypeBadgeColor(
                recommendation.rec_type
              )}`}
            >
              {getTypeLabel(recommendation.rec_type)}
            </span>
            {recommendation.is_cross_domain && (
              <span class="text-xs px-2 py-1 rounded border bg-purple-500/20 text-purple-400 border-purple-500/30">
                跨域
              </span>
            )}
          </div>
          <h3 class="font-semibold text-white">{recommendation.target}</h3>
        </div>
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          class="text-gray-400 hover:text-white transition-colors ml-2"
        >
          <svg
            class={`w-5 h-5 transition-transform ${isExpanded ? 'rotate-180' : ''}`}
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </button>
      </div>

      {/* 解释 */}
      <p class="text-sm text-gray-300 mb-3">{recommendation.explanation}</p>

      {/* 路径预览 */}
      {recommendation.path && recommendation.path.length > 0 && (
        <div class="flex items-center gap-1 flex-wrap text-xs text-gray-400">
          {recommendation.path.slice(0, 3).map((node, idx) => (
            <span key={idx}>
              {node}
              {idx < Math.min(2, recommendation.path.length - 1) && (
                <span class="mx-1">→</span>
              )}
            </span>
          ))}
          {recommendation.path.length > 3 && <span>... ({recommendation.path.length} 节点)</span>}
        </div>
      )}

      {/* 展开的详细信息 */}
      {isExpanded && recommendation.path && (
        <div class="mt-4 pt-4 border-t border-gray-700">
          <h4 class="text-xs font-semibold text-gray-400 mb-2">推荐路径</h4>
          <div class="space-y-2">
            {recommendation.path.map((node, idx) => (
              <div key={idx} class="flex items-center gap-2 text-sm">
                <div
                  class="w-2 h-2 rounded-full"
                  style={{ backgroundColor: recommendation.color || '#4ECDC4' }}
                />
                <span class="text-gray-300">{node}</span>
                {idx < recommendation.path.length - 1 && (
                  <svg class="w-4 h-4 text-gray-600" fill="currentColor" viewBox="0 0 20 20">
                    <path
                      fillRule="evenodd"
                      d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
                      clipRule="evenodd"
                    />
                  </svg>
                )}
              </div>
            ))}
          </div>
        </div>
      )}

      {/* 颜色指示器 */}
      <div
        class="mt-3 h-1 rounded-full"
        style={{ backgroundColor: recommendation.color || '#4ECDC4' }}
      />
    </div>
  )
}
